<template>
    <div class="custom-list">
        <ul class="list-item">
            <span class="text-item">微信：</span>
            <img src="@/assets/image/wexin.png"
                class="step-image-small">
        </ul>
        <br>
        <ul class="list-item">
            QQ群：
            <a href="https://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=0lQVY-3PyuOj3iL1Jw9LMOmP18bXDX9K&authKey=UyVD4T8O7GJHmMD9xKZh%2BufUnb4eXTp2dMddJzjrcpQlPNpNhPqmpgPCqrHzAjgh&noverify=0&group_code=959455927"
                class="link" target="_blank">点击加入群聊</a>
        </ul> 
    </div>
</template>

<style scoped>
/* 列表样式 */
.custom-list {
    display: inline-block;
}
@media (min-width: 1024px) {
    .custom-list {
        width: 900px;
    }
} 
/* 列表项样式 */
.list-item {
    margin-bottom: 1rem;   
}
/* 链接样式 */
.link {
    font-weight: bold;
    text-decoration: none;
    color: #60a5fa;
}
.link:hover{
    text-decoration: underline;
}
.text-item {
    display: inline-block; 
    vertical-align: top; 
    line-height: normal; 
}

.step-image-small {
    vertical-align: top; /* 让图片顶部对齐 */
    margin-top: 0; /* 移除原来的顶部外边距 */
    border-radius: 0.375rem;
    width: 150px;
    height: auto;
}

</style>